<template>
<!-- HTML结构：要求template里面，有且只有一个根标签 -->
  <div>
    <h2>66666</h2>
    <!-- 插值表达式，也叫大胡子，小胡子语法 -->
    <p>姓名：{{uname.toUpperCase() + '你好'}}</p>
    <p>年龄：{{age}}</p>
    <p>{{flag?'11111':'22222'}}</p>

    <!-- 标签的v-html类似innerHTML，会将HTML标签的样式呈现出来 覆盖掉原来的内容 -->
    <p v-html="info">简介：</p>

    <!-- 标签的v-text -->
    <p v-text="uname">xxx</p>
  </div>
</template>


<script>
  export default {
    //对象里面可以写很多东西，比如：data,methods,computed,watch,components
    //data 用于存储数据：写法上要求data定义成函数，函数里面放回一个对象，所有的数据都放到这个返回的对象中
    data () {
      return {
        //页面中用到的数据，都放在这里
        uname:'张三',
        age:20,
        flag:true,
        info:'这是一个非常<strong>优秀</strong>的body'
      }
    }
  }
</script>